import React, { useState } from 'react';
import { NavBar, Grid, Avatar, TextArea, Button, Form, Input, Divider, Popup } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { connect } from 'react-redux'
import request from '../../utils/request';

const img = [{
    id: 1,
    ulr: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%252F2021%252F0627%252F61f68cddj00qvbrll001hc000hs00hsc.jpg%26thumbnail%3D660x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668505013&t=866689b21a5c2d43b4bd4aaa42ad726f'
},
{
    id: 2,
    ulr: "https://img0.baidu.com/it/u=1160941591,1775419908&fm=253&fmt=auto&app=138&f=JPEG?w=480&h=480"
},
{
    id: 3,
    ulr: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp5.itc.cn%2Fimages03%2F20200518%2F7c5f250271844c008f6e50b7c20b2070.jpeg&refer=http%3A%2F%2Fp5.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668505013&t=0d3b91f7c9344cb27752144d1640a2fb"
},
{
    id: 4,
    ulr: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.gzkyz.com.cn%2Fimg%2F20210620%2F85d869b737f7b97657b16bf6a59ccc64.jpg&refer=http%3A%2F%2Fwww.gzkyz.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668505013&t=f3b7997fc7639d9347f95c8a25a671f0"
},
{
    id: 5,
    ulr: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp5.itc.cn%2Fq_70%2Fimages03%2F20201215%2Fc01f35c84435454abd9e89ca67849451.jpeg&refer=http%3A%2F%2Fp5.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668505013&t=c210a59b033a9afad359b31488cf14c4"
},
{
    id: 6,
    ulr: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg11.360buyimg.com%2Fimgzone%2Fjfs%2Ft1%2F174168%2F33%2F23523%2F170663%2F61cc2a0fE8d9a3a15%2F664e7b8cfef45339.jpg&refer=http%3A%2F%2Fimg11.360buyimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668505013&t=81666a1d0aaffcc5f6d6600ae268f5ef"
},
{
    id: 7,
    ulr: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180809%2Fd60aa5205306413e998eb2d761e36d09.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668505013&t=790208d3befdafc33cfff7ce06b499fd"
}, {
    id: 8,
    ulr: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.doubanio.com%2Fview%2Frichtext%2Flarge%2Fpublic%2Fp70951799.jpg&refer=http%3A%2F%2Fimg1.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668506256&t=77e4ca4c5ab3a5670dd2a3d3d1c26db1'
}, {
    id: 9,
    ulr: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fci.xiaohongshu.com%2Feb8b2dda-fbc6-d24b-a0b0-08c8aec39b58%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fci.xiaohongshu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668505013&t=50d0cfba6e5e1d899d8e7f53f92e465c'
}

]

function Dada(props) {
    const [visible2, setVisible2] = useState(false)

    const Navigat = useNavigate()

    const yy = props.user?.none

    const w = async (url) => {
        const { data } = await request.put(`/changeurl/'${id}'`, {
            params: {
                id: id
            },
            body: {
                url: url
            }
        })
    }

    const ww = () => {
        props.hhh(!props.user?.none)
    }

    const id = props.user.userInfo[0]?.user_id
    const onFinish = async (values) => {
        values.id = id
        const { data } = await request.post('/user/changepassword', values)

        if (data.code === 200) {
            localStorage.setItem('userInfo', JSON.stringify(data))
            alert("修改成功")
            props.logout()
            props.hhh(!props.user?.none)
            Navigat('/my')
        } else {
            alert("修改失败")
        }
    }

    return (
        <div>
            {yy ?
                <div className='Navigation' style={{
                    paddingTop: '45px',
                    zIndex: '-1'
                }}>
                    <NavBar onBack={() => { Navigat(window.history.back(-1)) }} className='Navigation'>个人资料</NavBar>
                    <Grid columns={4} gap={8} className='data'>
                        <Grid.Item >
                            <div style={{
                                fontSize: '18px',
                            }}>{'个人头像 :'}</div>
                        </Grid.Item>
                        <Grid.Item span={3}>
                            <div><Avatar src={props.user.userInfo[0]?.url} style={{ '--size': "100px" }} /></div>
                        </Grid.Item>
                    </Grid >
                    <div style={{ marginBottom: '10px' }}>
                        <span style={{
                            paddingLeft: '2px',
                            fontSize: '18px',
                        }}>{' 联系方式 :'}</span>

                        <span style={{ fontSize: '18px', paddingTop: '4px' }}>{'10086'}</span><br />
                    </div>

                    <div style={{ marginBottom: '10px' }}>  <span style={{
                        fontSize: '18px',
                    }}>{' 用户名 :'}</span>
                        <span style={{ fontSize: '18px', paddingTop: '4px' }}>{props.user.userInfo[0]?.username}</span><br />
                    </div>
                    <div style={{ marginBottom: '20px' }}><span style={{
                        fontSize: '18px',
                    }}>{' 昵称 :'}</span>
                        <span style={{ fontSize: '18px', paddingTop: '4px' }}>{'小贤'}</span>
                    </div>
                    <Button block color='primary' size='middle' style={{ width: '300px', marginLeft: '19px' }} onClick={ww} >
                        修改个人资料
                    </Button>
                </div>
                : <div className='Navigation' style={{
                    paddingTop: '45px',
                    zIndex: '-1'
                }}>
                    <NavBar onBack={ww} className='Navigation'>个人资料</NavBar>
                    <Form
                        layout='horizontal'
                        footer={
                            <Button block type='submit' color='primary' size='large' style={{ width: '300px' }} >
                                提交
                            </Button>
                        }
                        onFinish={onFinish}
                    >
                        <div style={{ textAlign: "center" }}>
                            <Avatar src={props.user.userInfo[0]?.url} style={{ '--size': '100px', marginLeft: '120px', }} />
                            <>
                                <Button
                                    style={{ width: '200px', marginTop: '20px' }} color='primary'
                                    onClick={() => {
                                        setVisible2(true)
                                    }}
                                >
                                    选择新的图片
                                </Button>
                                <Popup
                                    visible={visible2}
                                    onMaskClick={() => {
                                        setVisible2(false)
                                    }}
                                    position='top'
                                    bodyStyle={{ minHeight: '40vh' }}
                                >
                                    <Grid columns={3} gap={8} className='GridImg'>
                                        {
                                            img.map((item) => {
                                                return <Grid.Item key={item.id}>
                                                    <Avatar src={item.ulr} onClick={w.bind(null, item.ulr)} />
                                                </Grid.Item>
                                            })
                                        }


                                    </Grid>
                                </Popup>
                            </>
                            <Divider />
                        </div>
                        <Form.Item name='neww' label='修改密码' >
                            <Input placeholder='请输入新密码' type="password" />
                        </Form.Item>
                    </Form>
                </div>
            }

        </div>

    )
}
Dada = connect((state) => {
    return {
        user: state
    }
}, (dispatch) => {
    return {
        hhh(h) {
            dispatch({ type: 'none', payload: h })
        },
        logout() {
            dispatch({ type: 'logout' })

        }
    }
})(Dada)

export default Dada;